import App from "@/App";
import AuthRouter from "@/components/AuthRouter";
import { Login } from "@/Login/Login";
import Homepage from "@/Layout/homepage/homepage";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { lazy, Suspense } from "react";

// 使用 lazy 动态导入组件,提高首次加载速度
const Home = lazy(() => import("@/Layout/homepage/home/Home"));
const Article = lazy(() => import("@/Layout/homepage/article/Article"));
const SetFile = lazy(() => import("@/Layout/homepage/setFile/SetFile"));

export const Router = () => {
  return (
    // 使用 BrowserRouter 组件包裹整个路由
    <BrowserRouter>
      <Routes>
        {/* 根路径 "/" 使用 AuthRouter 组件进行认证 */}
        <Route
          path="/"
          element={
            <AuthRouter>
              <App />
            </AuthRouter>
          }
        />
        {/* "/login" 路径加载 Login 组件 */}
        <Route path="/login" element={<Login />} />
        {/* "/Homepage" 路径加载 Homepage 组件,并包含三个子路径 */}
        <Route path="/Homepage" element={<Homepage />}>
          {/* "/Homepage/article" 路径加载 Article 组件,使用 Suspense 组件进行异步加载 */}
          <Route
            path="article"
            element={
              <Suspense fallback={"记载中"}>
                <Article />
              </Suspense>
            }
          />
          {/* "/Homepage/main" 路径加载 Home 组件,使用 Suspense 组件进行异步加载 */}
          <Route
            path="main"
            element={
              <Suspense fallback={"记载中"}>
                <Home />
              </Suspense>
            }
          />
          {/* "/Homepage/setFile" 路径加载 SetFile 组件,使用 Suspense 组件进行异步加载 */}
          <Route
            path="setFile"
            element={
              <Suspense fallback={"记载中"}>
                <SetFile />
              </Suspense>
            }
          />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};
